<template>
	<view>
		<u-popup :show="show" mode="center" border-radius="14" :closeable="true" @close="close" round="10" :mask-close-able="false" @open="open">
			<view class="main font-30">
				<view class="text-center text-bold">设置支付密码</view>
				<view class="flex align-center margin-top-sm border-grey item">
					<view class="lf-label">手机号码</view>
					<view>{{$dealTel(mobile)}}</view>
				</view>
				<!-- <view class="flex align-center border-grey item">
					<view class="lf-label">验证码</view>
					<view>
						<input type="text" placeholder="请输入验证码" v-model="code" class="font-30 code-input"  />
					</view>
					<view class="getCode" :class="{'code-grey':getCodeisWaiting}" @click="getCode()">{{getCodeText}}</view>
				</view> -->
				<view class="flex align-center border-grey item">
					<view class="lf-label1">支付密码</view>
					<view class="flex-grow">
						<input type="number" maxlength="6" placeholder="请输入6位数支付密码" v-model="pwd" class="font-30" />
					</view>
				</view>
				<view class="flex align-center border-grey item">
					<view class="lf-label1">确认支付密码</view>
					<view class="flex-grow">
						<input type="number" maxlength="6" placeholder="请输入6位数确认支付密码" v-model="confirmPwd" class="font-30" />
					</view>
				</view>
				<view class="btn" @click="submit">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { newSendCode, payCipher } from '../../common/api/api.js'
  	import { customerInfo } from "@/common/api/customer";
	export default {
		data() {
			return {
				show: false,
				code: '',
				pwd: '',
				confirmPwd: '',
				mobile: '',
				getCodeText: '获取验证码',
				getCodeisWaiting: false,
			};
		},
		onShow() {
			this.open()
		},
		methods: {
			open() {
				if(this.$store.state?.user?.mobile){
					this.mobile = this.$store.state.user.mobile
				}
			},
			submit() {
				// if(!this.code) {
				// 	return this.$msg('请输入验证码')
				// }
				if(!this.pwd) {
					return this.$msg('请输入6位数支付密码')
				}
				if(this.pwd.length!=6) {
						return this.$msg('请输入6位数支付密码')
				}
				if(!this.confirmPwd) {
					return this.$msg('请输入确认6位数支付密码')
				}
				if(this.pwd !== this.confirmPwd) {
					return this.$msg('两次输入支付密码不一致')
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				payCipher({
					mobile: this.mobile,
					password: this.pwd,
					//code: this.code
				}).then(res=>{
					uni.hideLoading()
					this.$msg(res.msg)

					customerInfo().then(res => {
							this.$emit('change')
							this.$store.commit('user/setUserInfo', res.data || {})
					})

					if (res.code == 200) {
						this.show = false
						customerInfo().then(res => {
								this.$emit('change')
								this.$store.commit('user/setUserInfo', res.data || {})
						})
					}
				}).catch(err=>{
					uni.hideLoading()
				})
			},
			// getCode() {
			// 	if (this.getCodeisWaiting) {
			// 		return;
			// 	}
			// 	this.getCodeisWaiting = true;
			// 	newSendCode({
			// 		mobile: this.$store.state.user.userInfo.mobile,
			// 		type: 6,
			// 	}).then(res => {
			// 		if (res.code == 200) {
			// 			this.getCodeisWaiting = true;
			// 			this.setTimer()
			// 			this.$msg(res.msg)
			// 		} else {
			// 			this.getCodeisWaiting = false
			// 			this.$msg(res.msg)
			// 		}
			// 	})
			// },
			// setTimer() {
			// 	let holdTime = 180;
			// 	this.getCodeText = "重新获取(180)"
			// 	this.Timer = setInterval(() => {
			// 		if (holdTime <= 0) {
			// 			this.getCodeisWaiting = false;
			// 			this.getCodeText = "获取验证码"
			// 			clearInterval(this.Timer);
			// 			return;
			// 		}
			// 		this.getCodeText = "重新获取(" + holdTime + ")"
			// 		holdTime--;
			// 	}, 1000)
			// },
			close() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
.main {
	width: 640rpx;
	background: #FFFFFF;
	box-shadow: 0 7rpx 21rpx 0 rgba(0,0,0,0.46);
	border-radius: 10rpx;
	padding: 40rpx 30rpx;
	.item {
		height: 98rpx;
	}
	.lf-label {
		width: 160rpx;
	}
	.lf-label1 {
		width: 204rpx;
	}
	.getCode {
		width: 200rpx;
		height: 52rpx;
		border: 2rpx solid #000000;
		font-size: 26rpx;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.code-grey {
		color: grey;
		border: 2rpx solid grey;
	}
	.code-input {
		width: 236rpx;
	}
	.btn {
		width: 540rpx;
		height: 80rpx;
		background: #ECA52B;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
